<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/element.css" />
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<link rel="stylesheet" type="text/css" href="css/common.css" />
		<script src="js/jquery-3.5.1.js"></script>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/element.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			[v-cloak] {
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="app" v-cloak>
			<div class="page_root" style="padding: 20px">
				<el-card class="box-card" shadow="never">
                    <div style="display: flex;justify-content: space-between">
                        <span style="font-size: 20px">人员列表</span>
                        <el-button type="success" icon="el-icon-plus" @click="add"></el-button>
                    </div>
                    <el-divider></el-divider>
                    <el-table :data="empList" stripe style="width: 100%" :height="tableHeight">
                        <el-table-column fixed prop="id" label="序号" width="100"></el-table-column>
                        <el-table-column prop="c0" label="姓名" width="150"></el-table-column>

                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button @click="edit(scope.row)" type="primary" size="small">编辑</el-button>
                                <el-button @click="del(scope.row)" type="danger" size="small">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
				</el-card>

				<el-dialog  :visible.sync="dialogForm" width="30%">
					<el-form :model="rowData">
                        <el-input v-model="rowData.id" type="hidden"></el-input>
                        <el-form-item label="姓名">
                            <el-input v-model="rowData.c0"></el-input>
                        </el-form-item>
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button type="primary" @click="editSure">确 定</el-button>
						<el-button @click="dialogForm = false">取 消</el-button>
					</div>
				</el-dialog>
			</div>
		</div>
		
		<script type="text/javascript">
			new Vue({
				el: '#app',
				data: {
                    dialogForm:false,
                    flag:'',
					empList:[],
                    rowData:{id:'',c0:''},
                    tableHeight: document.documentElement.clientHeight - 150,
				},

				created() {
					window.cache = window.parent.cache;
                    this.getData()
				},
				methods: {
					getData(){
					    var that = this
                        $.get("http://localhost/sys/getEmployee",function(res){
                            that.empList = res.data
                        })
					},
                    edit(data){
                        this.dialogForm = true
                        this.rowData = data
                        this.flag = 'edit'
                    },
                    editSure(){
					    var that = this
                        this.dialogForm = false
                        this.doPost(this.flag,this.rowData)
                    },
                    del(data){
                        var that = this
                        this.$confirm('确定删除?', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            that.doPost('del',data)
                        }).catch(() => {});
                    },
                    add(){
                        this.flag = 'add'
                        this.dialogForm = true
                    },

                    doPost(action,data){
                        var that = this
                        $.ajax({
                            url:'http://localhost/param/emp/' + action,
                            type:"post",
                            contentType: "application/json",
                            dataType:"json",
                            data:JSON.stringify(data),
                            success: function (res) {
                                that.getData()
                                that.rowData = {id:'',c0:''}
                                $.get("http://localhost/sys/getEmployee",function(res2){
                                    var arr = []
                                    res2.data.forEach(function (item) {
                                        arr.push(item.c0)
                                    })
                                    window.parent.cache.employee = arr
                                })
                            }
                        })
                    }
				},
                mounted() {
                    var that = this;
                    window.onresize = () => {
                        return (() => {
                            window.fullHeight = document.documentElement.clientHeight;
                            that.tableHeight = window.fullHeight - 150;  // 高
                        })()
                    };
                },
			})
		</script>
	</body>
</html>
